<template>
  <div class="roles">
    <div class="box">
      <div class="but">
        <el-button type="primary" size="large" @click="add">添加角色</el-button>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          :border="parentBorder"
          :preserve-expanded-content="preserveExpanded"
        >
          <el-table-column type="expand">
            <template #default="row">
              <el-scrollbar max-height="420px" max-width="100px">
                <div class="childrenBox" v-for="item in row.row.children" :key="item">
                  <div class="oneRank">
                    <el-button type="primary" plain
                      >{{ item.authName }}
                      <el-icon class="el-icon--right"><Close /></el-icon>
                    </el-button>
                    <el-icon><CaretRight /></el-icon>
                  </div>
                  <div class="towRank">
                    <div class="B" v-for="j in item.children" :key="j">
                      <div class="B1">
                        <el-button type="success" plain
                          >{{ j.authName }}
                          <el-icon class="el-icon--right"><Close /></el-icon>
                        </el-button>
                        <el-icon><CaretRight /></el-icon>
                      </div>
                      <div class="threeRank">
                        <div class="C" v-for="k in j.children" :key="k">
                          <el-button type="warning" plain
                            >{{ k.authName }}
                            <el-icon class="el-icon--right"><Close /></el-icon>
                          </el-button>
                          <el-icon><CaretRight /></el-icon>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </template>
          </el-table-column>
          <el-table-column label="#" prop="id" />
          <el-table-column label="角色名称" prop="roleName" />
          <el-table-column label="角色描述" prop="roleDesc" />
          <el-table-column label="操作">
            <template #default="row">
              <But @rowSon="SortDown(row.row)"></But>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import But from './button/index.vue'
import { Close, CaretRight } from '@element-plus/icons-vue'
import { getRoleTable } from '@/api/roleTable'
import { useCounterStoreB } from '@/stores/temporary'
const storeB = useCounterStoreB()
const parentBorder = ref(true)
const preserveExpanded = ref(false)
const addState = ref()
const tableData = ref()
interface IRoleTable {
  data: {
    data: {
      id: number
      roleName: string
      roleDesc: string
      children: [
        authName: string,
        id: number,
        path: string,
        children: [
          authName: string,
          id: number,
          path: string,
          children: [authName: string, id: number, path: string],
        ],
      ]
    }
  }
}
const fn = async () => {
  try {
    const res = (await getRoleTable()) as IRoleTable
    tableData.value = res.data.data
  } catch {
    console.log('err')
  }
}
interface rowIRoleTable {
  id: number
  roleName: string
  roleDesc: string
  children: [
    authName: string,
    id: number,
    path: string,
    children: [
      authName: string,
      id: number,
      path: string,
      children: [authName: string, id: number, path: string],
    ],
  ]
}
const SortDown = (row: rowIRoleTable) => {
  // console.log('row', row)
  storeB.rowIdFun(row.id)
  storeB.roleNameFun(row.roleName)
  storeB.roleDescFun(row.roleDesc)
  storeB.jurisdictionObjFun(row)
}
const add = () => {
  addState.value = !addState.value
  storeB.stateFun(addState.value)
  storeB.titleStateFun('添加角色')
}
onMounted(() => {
  fn()
})
watch(
  () => storeB.addState,
  (i) => {
    addState.value = i
  },
)
</script>

<style scoped lang="scss">
.childrenBox {
  padding: 10px 50px;
  margin: 10px 0;
  display: flex;
  .oneRank {
    width: 15%;
    display: flex;
    align-items: center;
  }
  .towRank {
    width: 25%;
    display: flex;
    align-items: center;
    flex-direction: column;
    .B {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .B1 {
        display: flex;
        align-items: center;
        padding: 10px;
        border-bottom: 2px solid #cccccc4a;
      }
      .threeRank {
        width: 50%;
        display: flex;
        align-items: center;
        .C {
          display: flex;
          align-items: center;
          padding: 10px;
          border-bottom: 2px solid #cccccc4a;
        }
      }
    }
  }
}
</style>
